<template>
  <section>

    <!-- tool bar Starts -->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <input v-model="filters.hrPosition" placeholder="姓名/手机号码" class="input-style"/>
          <el-button type="success" @click="handleAdd()">新增</el-button>

        </el-form-item>
      </el-form>

      <!--tool bar ends -->
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="hrName"
          label="高管姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="hrPosition"
          label="高管职位"
          width="180">
        </el-table-column>

        <el-table-column
          prop="hrPic"
          label="高管照片">
        </el-table-column>
        <el-table-column
          prop="hrDesc"
          label="高管名言">
        </el-table-column>
        <el-table-column inline-template :context="_self" label="操作" width="140" scope="scope">
          <template>
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDel(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <!--add product -->
    <el-dialog :title="diaTit" :visible.sync="dialogFormVisible">
      <form class="form-horizontal" enctype="multipart/form-data" role="form">

        <dl class="form-items">
          <dt class="labels">高管姓名</dt>
          <dd>
            <input type="hidden" id="_ids" vaule="130" />
            <el-input v-model="form.hrName" auto-complete="off"></el-input>
          </dd>

        </dl>
        <dl class="form-items">
          <dt class="labels">高管职位</dt>
          <dd>
            <el-input v-model="form.hrPosition" auto-complete="off"></el-input>
          </dd>

        </dl>


        <dl class="form-items">
          <dt class="labels">高管照片</dt>
          <dd>
            <div class="file-upload">
              <el-button type="primary" size="small">上传图片</el-button>
              <input type="file" id="file" ref="filed"/>
            </div>
          </dd>

        </dl>

        <dl class="form-items">
          <dt class="labels">高管名言</dt>
          <dd><el-input type="textarea" v-model="form.hrDesc"></el-input></dd>

        </dl>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>

          <el-button type="primary" @click="addProduct()" v-if="isAdd">确 定</el-button>
          <el-button type="primary" @click="editProduct()" v-else>确 定</el-button>
        </div>
      </form>
    </el-dialog>

    <!--add product -->
  </section>
</template>

<script>
  import util from '../../common/util'
  import NProgress from 'nprogress'
  import req from '../../util/request.js'

  export default {
    data() {
      return {
        filters: {
          hrPosition: ''
        },
        tableData: [],
        dialogFormVisible: false,
        diaTit:"增加人事",
        rowId:0,
        deleteId:0,
        isAdd:true,
        dialogVisible:false,
        form: {
          hrPosition: '',
          hrPic: '',
          hrName:'',
          hrDesc: ''
        }
      }

    },
    created(){
      this.getProductList();
    },
    mounted() {

    },
    methods: {
      handleEdit(row){
        var vm=this;
        vm.dialogFormVisible = true;
        vm.isAdd=false;
        vm.rowId=row.id;
        vm.diaTit="编辑产品";
        vm.form=row;
      },

      handleDel(row){
        var vm=this;
        vm.deleteId=row.id;

      },
      handleDel(row){
        var vm = this;
        vm.deleteId = row.id;
        var r=confirm("确认要删除该职位么？");
        if(r){
          req._ajax({
            url: "deleteHuman/"+row.id,
            type: "POST",
            success: function (data) {
              vm.getProductList();
            }
          })
        }else{
          console.log("暂时不删除");
        }
      },

      editProduct(){
        var form = new FormData(), vm = this,
          file = document.getElementById("file").files[0],
          _ids=document.getElementById("_ids").value;
        form.append("Id",  _ids);
        form.append("hrPosition", vm.form.hrPosition);
        form.append("hrName", vm.form.hrName);
        form.append("hrDesc", vm.form.hrDesc);

        if (file) {
          form.append("file", file);
        }

        req._ajax({
          url: "editHuman/"+vm.rowId,
          type: "POST",
          data: form,
          success: function (data) {
            vm.getProductList();
          }
        })
        vm.dialogFormVisible=false;

      },
      handleAdd(){
        this.dialogFormVisible = true;
        this.isAdd=true;
      },
      addProduct(){
        var form = new FormData(), vm = this,
          file = document.getElementById("file").files[0],
          _ids=document.getElementById("_ids").value;
        form.append("Id",  _ids);

        form.append("hrPosition", vm.form.hrPosition);
        form.append("hrName", vm.form.hrName);
        form.append("hrDesc", vm.form.hrDesc);
        if (file) {
          form.append("file", file);
        }
        req._ajax({
          url: "addHuman",
          type: "POST",
          data: form,
          success: function (data) {
            vm.getProductList();
          }
        })
        vm.dialogFormVisible=false;
      },
      getProductList(){
        var vm=this;

        console.log('---------- getProductList ----------');

        req.jQ_ajax({
          url:"humanList",
          type:"GET",
          success:function(data){
            vm.tableData=data.items;

          }

        })
      }

    },
    components: {
      //ElInput
    }

  }
</script>

<style scoped>
  ul {
    list-style: none;

  }

  .toolbar {
    padding: 10px;
  }

  .input-style {
    width: 200px;
    height: 30px;
    padding-left: 6px;
    line-height: 30px;
    border-radius: 3px;
    border: #d1d1d1 1px solid;
  }

  .select-style {

    width: 200px;
    height: 32px;
    line-height: 32px;
    border-radius: 3px;
    border: #d1d1d1 1px solid;
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  .form-items {
    display: -webkit-box;
    list-style: none;

    padding:6px 10px;
  }

  .form-list-pare dt {
    width:120px;
  }
  .form-list-pare dd{
    -webkit-box-flex: 1;
  }
  .file-upload {
    position: relative;
    width: 200px;

  }

  .file-upload .el-button {
    position: absolute;
    z-index: 1;
  }

  .file-upload input[type='file'] {
    position: absolute;
    z-index: 2;
    opacity: 0;
  }

  .file-list {
    display: -webkit-box;
  }

  .file-list li {
    width: 100px;
  }

</style>
